<template>
  <div class="details">
    <div >
      <van-nav-bar id="pdDetails_nav"
        title="商城"
        left-text="返回"
        left-arrow
        @click-left="pdDetailsonClickLeft"
      />
    </div>
    <van-row>
      <van-col span="4">
        <van-sidebar v-model="activeKey" id="details_nav">
          <van-sidebar-item @click="toLoadProduct(item.id)" v-for="item in categoryInfo" :key="item.id" :title="item.name"/>
        </van-sidebar>
      </van-col>
      <div id="details_card">
        <van-col span="20">
        <van-card v-for="(c,index) in productInfo" :key="c.id" 
          :num="c.number"
          :price="c.price"
          :desc="c.description"
          :title="c.name"
          :thumb="c.photo"
        >
        <template #footer>
          <van-stepper @change="changeMoney(c.number,c.price,index)" :min="0" v-model="c.number" />
        </template>
        </van-card>
      </van-col>
      </div>
      
    </van-row>
    <van-row span="9">
      <div class="details_footer">
      <div class="footer_left">
        <span style="color:#ddd">金额：</span>
        <span style="color:#ddd">{{allMoney}}</span>
      </div>
      <div class="footer_right">
        <div><van-button round type="info" @click="topay">结 算</van-button></div>
      </div>
    </div>
    </van-row>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      activeKey: 0,
      value:0,
      arr:[],
      total:[],
      allMoney:0
    };
  },
  created(){
    this.load();
    this.loadProductInfo();
  },
  computed:{
    ...mapState('details',['categoryInfo','productInfo'])
  },
  methods:{
    ...mapActions('details',['loadCategoryInfo','loadProductInfo']),
    topay(){
      this.$router.push({path:'topayOrder',query:{price:this.allMoney}})
    },
    changeMoney(number,details,index){
      this.total[index]=Number(number * details);
      this.allMoney=0;
      this.total.forEach((item,index) => {
        this.allMoney= this.allMoney + item
      });
    },
    toLoadProduct(id){
       this.arr =this.productInfo.filter((item,index)=>{
        return id==item.id
      })
    },
    load(){
      let obj ={
        page:0,
        pageSize:100
      }
      this.loadCategoryInfo(obj).then(res=>{
        this.activeKey= this.$route.query.index
      })
    },
    pdDetailsonClickLeft(){
      this.$router.push({path:'index'})
    }
  }
};
</script>
<style scope>
#details_card{
    height:calc(100vh - 250px);
    position: relative;
    top:46px;
}
  .details_footer{
    width:100%;
    height:50px;
    position: fixed !important;
    left:0;
    bottom:0;
    background-color: rgba(30, 94, 174,0.7);
  }
  .footer_left{
    width: 50%;
    padding-left:20px;
    float: left;
    line-height: 50px;
  }
  .footer_right{
    width:50%;
  }
  .footer_right>div>*{
    width:70px;
    height:40px;
    background-color: rgba(30, 94, 174,0.9);
    color: #eee;
    display: inline-block;
    border-radius: 20px;
    position:absolute;
    top:5px;
    right:25px;
  }
  #details_nav{
    height:calc(100vh - 100px); 
    position: fixed;
    top:46px;
    left:0;
  }
  #pdDetails_nav{
    width:100%;
    position: fixed;
  }
</style>